

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:todo_app/components/Button/CustomElevateButton.dart';
import 'package:todo_app/components/TextExt.dart';
import 'package:todo_app/layout/Gaps.dart';

class CupertinoModalPicker extends HookWidget {
  const CupertinoModalPicker({ required this.onSelected, required this.title, required this.itemExtent, required this.children, super.key});
  final double itemExtent;
  final List<Widget> children;
  final String title;
  final ValueChanged<int?> onSelected;

  @override
  Widget build(BuildContext context) {
    var index = useState<int>(0);
    return Column(
      children: [
        Row(
          children: [
            CustomElevateButton(
              bgColor: Colors.transparent,
              width: 66.dp, height: 28.dp,
              style: const TextStyle(color: Colors.black54),
              onTap: () {
                onSelected(null);
              }, 
              child: const Text("取消"),
            ),
            Expanded(child: TextExt.title(title, textAlign: TextAlign.center, bold: true)),
            CustomElevateButton(
              bgColor: Colors.transparent,
              width: 66.dp, height: 28.dp,
              style: const TextStyle(color: Colors.black54),
              onTap: () {
                onSelected(index.value);
              }, 
              child: const Text("确定"),
            )
          ],
        ),
        Expanded(
          child: CupertinoPicker(
            itemExtent: itemExtent, 
            onSelectedItemChanged: (i) {
              index.value = i;
            },
            children: children
          ),
        ),
      ],
    );
  }
}